import { Link,NavLink } from 'react-router-dom'


const Head = ()=>{

    return(
        <>
          <ul style={{ display:'flex' }}>
            <li style={{marginRight:'50px'}}>
                 <NavLink to="/">首页</NavLink> 
            </li>  
            <li style={{marginRight:'50px'}}>
                 <NavLink 
                    to="/list" 
                    caseSensitive={true} 
                    className={({isActive})=>{
                            // 得到的这个isActive就是标识当前的路径是否于我的Navlink
                            // 要跳转的链接 to里面的配置路径匹配
                            return isActive ? 'ac':'noac'
                    }}  
                    // style={{border:'1px solid #000'}}
                    style={({isActive})=>{
                         return isActive ? { border:'2px solid red' }:{ border:'none'}
                    }}
                   
                 >  列表页  </NavLink>   
            </li>
            <li style={{marginRight:'50px'}}>
                 <NavLink to="/uc" reloadDocument>用户中心</NavLink> 
            </li>
          </ul>      
          
          
          
        </>
    )

}

export default Head